<template>
  <div class="footerBar">
    <router-view />
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="chat" to="/message">消息</van-tabbar-item>
      <van-tabbar-item icon="contact" to="/myInfo">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script type="text/ecmascript-6">
  import Vue from 'vue'
  import { Tabbar, TabbarItem } from 'vant';
  Vue.use(Tabbar);
  Vue.use(TabbarItem);
  export default{
    data(){
      return {
        active: 0,
      }
    },
    methods: {},
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .footerBar {
    width 100%
    height 100%
    .van-tabbar {
      .van-tabbar-item {
        font-size 14px
        .van-tabbar-item__icon {
          font-size 20px
        }
      }
      .van-tabbar-item--active {
        color #00ad6e
      }
    }
  }
</style>
